<template>
    <a-breadcrumb :style="{color: 'white'}">
        <template v-for="(routeItem, rotueIndex) in $route.matched" :key="routeItem.name">
            <a-breadcrumb-item>
                <span>{{ routeItem.meta.title }}</span>
                <template v-if="routeItem.children.length" #overlay>
                    <a-menu :selectedKeys="[$route.matched[rotueIndex + 1]?.name]">
                        <template v-for="childItem in routeItem.children">
                            <a-menu-item v-if="!childItem.meta?.hidden" :key="childItem.name">
                                <router-link :to="{ name: childItem.name }" custom #="{ navigate }">
                                    <div @click="navigate">{{ childItem.meta?.title }}</div>
                                </router-link>
                            </a-menu-item>
                        </template>
                    </a-menu>
                </template>
            </a-breadcrumb-item>
        </template>
    </a-breadcrumb>
</template>

<script setup lang="ts">
    import { ref,onMounted,watch } from 'vue'
    import { useRoute } from "vue-router";
    const route = ref<any>(useRoute())
    watch(()=>route.value.path,(val,oldval) => {

    })
</script>

<style scoped>
</style>